<%@ page language="java" import="java.util.*" pageEncoding="UTF-8"%>
<%@ taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c" %>
<%
String path = request.getContextPath();
String basePath = request.getScheme()+"://"+request.getServerName()+":"+request.getServerPort()+path+"/";
%>

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
  <head>
    <base href="<%=basePath%>">
    
    <title>My JSP 'luaalm.jsp' starting page</title>
    
	<meta http-equiv="pragma" content="no-cache">
	<meta http-equiv="cache-control" content="no-cache">
	<meta http-equiv="expires" content="0">    
	<meta http-equiv="keywords" content="keyword1,keyword2,keyword3">
	<meta http-equiv="description" content="This is my page">
	<!--
	<link rel="stylesheet" type="text/css" href="styles.css">
	-->

	<script type="text/javascript" src="script/jquery-1.8.2.js"></script>
	
	<script type="text/javascript">
	
	$(function()
	{
		$("#submit").click(function()
		{
			$.ajax(
			{
				type : "post",
				url : "addMessage.action",
				data : {username : $("#username").val(), articleId : $("#articleId").val(), messageContent : $("#messageContent").val()},
				dataType : "json",
				success : function(returnedData)
				{
					alert(returnedData);
					var html = null;
					for(var i = 0; i < returnedData.length; i++)
					{
						var message = returnedData[i];
						
						var index = i;
						var username = message.user.username;
						var messageContent = message.messageContent;
						
						html += "<tr><td align='center'>"+index+"</td><td align='center'>"+username+"</td><td><div style='MARGIN-RIGHT: auto; MARGIN-LEFT: auto; width:600px;'>"+messageContent+"</div></td></tr>"
					}
					
					$("#theTable tr:eq(0)").append(html);
				}
			});
		});
	});
	
	
	</script>

  </head>
  
  <body bgcolor="pink" style="TEXT-ALIGN: center ">
    
    <h2 align="center">查看文章并为文章留言</h2>
    
    <p align="center" >.....................致...我...们...终...将...逝...去...的...青...春.......................</p>
    <input type="hidden" value="${article.id }" name="articleId">
    <p>标题：${article.title }
    <div style="MARGIN-RIGHT: auto; MARGIN-LEFT: auto; height:150px; width:768px; border-width:1px; border-style:solid;">
    <p align="left">&nbsp;&nbsp;&nbsp;&nbsp;${article.articleContent }
    </div>
    
    <br>
    
    <table width="768px" border="1" align="center" id="theTable">
    	<tr><th>序号</th><th>留言人</th><th>留言内容</th></tr>
    	<c:forEach varStatus="s" var="message" items="${list }">
    	<tr>
    	   <td align="center">${s.index+1 }</td>
    	   <td align="center">${message.user.username }</td>
    	   <td><div style="MARGIN-RIGHT: auto; MARGIN-LEFT: auto; width:600px;">${message.messageContent }</div></td>
    	</tr>
    	</c:forEach>
    </table>
    <br>

    <div style="MARGIN-RIGHT: auto; MARGIN-LEFT: auto; height:150px; width:768px;">
	
	<form action="addMessage" method="post">
	    <input type="hidden" value="${sessionScope.username }" id="username">
	    <input type="hidden" value="${article.id }" id="articleId">
        <textarea rows="8" cols="93" name="messageContent" id="messageContent"></textarea>
        <p align="right"><input type="submit" value="回复信息" id="submit">
    </form>
    
    </div>
    
  </body>
</html>
